"use client";
import * as React from "react";

import BuildNavigation from "./BuildNavigation";
import { NavList, NavDropdown, NavConfigData } from "@/types/configData";

import { useRouter } from 'next/navigation';
import { ThemeToggle } from "@/components/ui/theme-toggle";

const components: NavList[] = [
  {
    title: "Blog",
    description: "A_blog",
  },
  {
    title: "Album",
    description: "A_collection_of_photos",
  },
];

const languages: NavDropdown[] = [
  { label: "中文", id: "zh" },
  { label: "日本語", id: "ja" },
  { label: "한국어", id: "ko" },
  { label: "English", id: "en" },
];

export function MyNavigationMenu() {
  const router = useRouter();

  const changeLanguage = async (lng: string) => {
    await fetch('/api/locale', {
      method: 'POST',
      body: JSON.stringify({ locale: lng }),
    });
    router.refresh();          
  };

  const navigationConfigData: NavConfigData[] = [
    {
      title: "Home",
      href: "/",
      type: "link",
      align: "left",
    },
    {
      title: "Page",
      children: components,
      align: "left",
      type: "list",
      fn: (res: NavList) => {
        const map = {
          Album: "/album",
          Blog: "/blog",
        } as Record<string, string>;
        const url = map[res.title];
        if (url) {
          window.location.href = url;
        }
      },
    },
    {
      title: "languages",
      children: languages,
      align: "right",
      type: "dropdown",
      fn: (res) => {
        changeLanguage(res.id);
      },
    },
    {
      title: "register",
      href: "/register",
      align: "right",
      type: "link",
    },
    {
      title: "login",
      href: "/login",
      align: "right",
      type: "link",
    },
  ];

  return (
    <div className="w-full flex justify-center bg-white relative z-10">
      <div className="w-full max-w-screen-lg flex items-center">
        <BuildNavigation data={navigationConfigData} />
        <ThemeToggle />
      </div>
    </div>
  );
}
